<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Mega Menu 最终版（双列大分类 + 三列二分类）</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: sans-serif;
      }

      .mega-menu-container {
        display: flex;
        width: 100%;
        align-items: flex-start;
      }

      .mega-menu-left {
        width: 200px;
        background: #2b2b2b;
        color: white;
        display: flex;
        flex-direction: column;
      }

      .mega-menu-left div {
        padding: 12px 16px 12px 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        position: relative;
        transition: background 0.3s;
      }

      .mega-menu-left div::before {
        content: "";
        position: absolute;
        left: 0px;
        width: 15px;
        height: 30px;
        background: #999;
        border-radius: 2px;
        transition: background 0.3s;
      }

      .mega-menu-left div:hover,
      .mega-menu-left div.active {
        background: #1a73e8;
      }

      .mega-menu-left div:hover::before,
      .mega-menu-left div.active::before {
        background: rgb(38, 202, 202);
      }

      .mega-menu-right {
        flex: 1;
        background: #fff;
        padding: 20px;
        display: none;
        border: 1px solid #eee;
        max-height: 600px;
        overflow-y: auto;
      }

      .mega-menu-right.show {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* ✅ 双列大分类 */
        gap: 40px;
      }

      .mega-menu-placeholder {
        flex: 1;
        background: url("https://via.placeholder.com/600x400?text=请选择分类")
          center center no-repeat;
        background-size: contain;
        border: 1px solid #eee;
      }

      .mega-menu-column {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* ✅ 三列二分类 */
        gap: 6px;
      }

      .mega-menu-column h4 {
        font-size: 16px;
        margin-bottom: 10px;
        color: #333;
        grid-column: 1 / -1; /* 标题横跨三列 */
      }

      .mega-menu-column a {
        color: #444;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
      }

      .mega-menu-column a:hover {
        text-decoration: underline;
        color: #007bff;
      }

      .product-card {
        width: 160px;
        border: 1px solid #ddd;
        padding: 10px;
        margin: 8px;
        text-align: center;
        background: #f9f9f9;
      }

      .product-card img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        margin-bottom: 6px;
      }

      .fenlei-link {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div class="mega-menu-container">
      <div class="mega-menu-left" id="leftMenu"></div>
      <div class="mega-menu-right" id="megaMenuContent"></div>
      <div class="mega-menu-placeholder" id="megaMenuPlaceholder"></div>
    </div>

    <script>
      function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function randomImage() {
        const w = 160;
        const h = 100;
        return `https://via.placeholder.com/${w}x${h}?text=产品图`;
      }

      // ✅ 模拟导航数据
      const categoryData = {};
      for (let i = 0; i < 10; i++) {
        const catKey = `cat${i + 1}`;
        const catLabel = `导航${i + 1}`;
        const subCategories = [];

        const subCount = randomInt(4, 6);
        for (let j = 0; j < subCount; j++) {
          const subTitle = `分类${j + 1}`;
          const products = [];

          const productCount = randomInt(6, 9);
          for (let k = 0; k < productCount; k++) {
            products.push({
              name: `子分类${k + 1}`,
              image: randomImage(),
            });
          }

          subCategories.push({
            title: subTitle,
            items: products,
          });
        }

        categoryData[catKey] = {
          label: catLabel,
          children: subCategories,
        };
      }

      const leftMenu = document.getElementById("leftMenu");
      const contentArea = document.getElementById("megaMenuContent");
      const placeholder = document.getElementById("megaMenuPlaceholder");

      // ✅ 渲染左侧导航
      for (const [key, value] of Object.entries(categoryData)) {
        const navItem = document.createElement("div");
        navItem.textContent = value.label;
        navItem.dataset.id = key;
        leftMenu.appendChild(navItem);
      }

      const navItems = document.querySelectorAll(".mega-menu-left div");

      navItems.forEach((item) => {
        item.addEventListener("mouseenter", () => {
          navItems.forEach((i) => i.classList.remove("active"));
          item.classList.add("active");

          const catId = item.dataset.id;
          const data = categoryData[catId];
          contentArea.innerHTML = "";
          contentArea.className = "mega-menu-right show";
          placeholder.style.display = "none";

          // 渲染右侧内容
          data.children.forEach((col) => {
            const colDiv = document.createElement("div");
            colDiv.className = "mega-menu-column";
            const title = document.createElement("h4");
            title.textContent = col.title;
            colDiv.appendChild(title);

            col.items.forEach((prod) => {
              const link = document.createElement("a");
              link.textContent = prod.name;
              link.classList.add("fenlei-link");
              link.addEventListener("click", (e) => {
                e.preventDefault();
                contentArea.innerHTML = "";
                contentArea.className = "mega-menu-right show";
                col.items.forEach((p) => {
                  const card = document.createElement("div");
                  card.className = "product-card";
                  card.innerHTML = `<img src="${p.image}" /><div>${p.name}</div>`;
                  contentArea.appendChild(card);
                });
              });

              colDiv.appendChild(link);
            });

            contentArea.appendChild(colDiv);
          });
        });
      });

      document
        .querySelector(".mega-menu-container")
        .addEventListener("mouseleave", () => {
          contentArea.classList.remove("show");
          contentArea.innerHTML = "";
          placeholder.style.display = "block";
          navItems.forEach((i) => i.classList.remove("active"));
        });
    </script>
  </body>
</html>
